<template>
  <view>
    <view v-if="listData.length >0" class="collect-content">
      <view v-for="(item, index) in listData" :key="index" class="content">
        <uni-swipe-action>
          <uni-swipe-action-item :right-options="swipeOptions" @click="handleDeleteGoods(item)">
            <view class="shop">
              <view class="shopInfoTop">
                <view class="flexCenter shopImg">
                  <view class="product-img-wrap" @click="goShopDetail(item)">
                    <image class="pic" :src="item.skuImg" />
                    <image v-if="item.type ==400" class="danger-bg" src="失效" />
                    <view v-if="item.type ==400" class="danger_icon">已失效</view>
                  </view>
                </view>
                <view class="shopInfo">
                  <view class="shopName">{{ item.skuName }}</view>
                  <view class="flexCenter shopCode">编码：{{ item.skuCode }}</view>
                  <view class="flexCenter shopCode">
                    预计出货日：{{ item.expectDeliveryDay }}
                  </view>
                  <view class="price_row">
                    <view class="flexCenter shopPrice">
                      <view class="price">￥<text>{{ Number(item.nowPrice).toFixed(2) }}</text>/{{ item.unit }}</view>
                    </view>
                    <view class="shop_cart" @click.stop="handleAddShopping(item)">
                      <view v-if="item.buyyerTimes" class="frequently-purchased-info">已购买{{ item.buyyerTimes }}次</view>
                      <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
                      <img v-if="item.type !=400" src="/static/image/shopping_cart.png" alt="添加购物车">
                      <!-- #endif -->
                      <!-- #ifdef H5 -->
                      <img v-if="item.type !=400" src="../../static/image/shopping_cart.png" alt="添加购物车">
                    <!-- #endif -->
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </uni-swipe-action-item>
        </uni-swipe-action>
      </view>

    </view>
    <view v-else class="noShop">
      <img v-if="vuex_imgPath" :src="vuex_imgPath+'/noshop.png'">
      <text>暂无商品</text>
    </view>
  </view>
</template>

<script>
import { tdkUrl } from '@/common/common';
import { addShopCar, deleteMemberCollect, updatePurchase } from '@/api/shopCar'
export default {
  components: {

  },
  props: {
    listData: {
      type: Array,
      default: null
    },
    pagetype: {
      type: Number,
      default: null
    }

  },
  data() {
    return {
      title: 'Index',
      swipeOptions: [{
        text: '删除',
        style: {
          backgroundColor: '#E51728',
          marginTop: '1rpx',
          marginRight: '1rpx',
          zIndex: -1
        }
      }],

    }
  },
  onLoad(option) {
  },
  mounted() {
  },

  methods: {
    async handleDeleteGoods(item) {
      if (this.pagetype == 1) { // 收藏
        const params = { collectId: item.collectId }
        // #ifdef MP-ALIPAY || MP-WEIXIN
        params.appletType = 'applet'
        // #endif
        // #ifdef H5
        params.appletType = 'm'
        // #endif
        const res = await deleteMemberCollect(params)
        if (res.errorCode == 1) {
          this.$u.toast('删除成功')
          this.$emit('fatherMethod')
        } else {
          this.$u.toast(res.errorMessage)
        }
      } else {
        const params = { customer_code: item.customerCode, sku_id: item.skuId }
        // #ifdef MP-ALIPAY || MP-WEIXIN
        params.appletType = 'applet'
        // #endif
        // #ifdef H5
        params.appletType = 'm'
        // #endif
        const res = await updatePurchase(params)
        if (res.code == 0) {
          this.$u.toast('删除成功')
          this.$emit('fatherMethod')
        } else {
          this.$u.toast(res.errorMessage)
        }
      }
    },
    handleAddShopping(item) {
      console.log('购物车收藏商品加入购物车')
      const { memberId } = this.vuex_accountInfo
      const { warehouseCode, cityCode } = this.vuex_cityInfo
      const { skuId, skuCode } = item
      var skuIdNumlist = [{ skuId, skuCode, skuNum: 1 }]
      if (Number(item.type) == 500) {
        return this.$u.toast('该商品价格仅供参考，如需购买，请先询价');
      }
      const params = {
        member_id: memberId,
        cityId: cityCode,
        warehouseId: warehouseCode,
        source: '40', // android=>10;ios=>20;wap=>30;pc=>40
        skuIdNumlist
      }
      addShopCar(params).then((res) => {
        if (res.code == 0) {
          this.$u.toast(res.message)
        } else {
          this.$u.toast(res.message)
        }
      })
    },
    goShopDetail(item) {
    // #ifdef MP-ALIPAY || MP-WEIXIN
      uni.navigateTo({
        url: '/shopDetail/index?spuCode=' + item.spuCode
      })
      // #endif
      // #ifdef H5
      window.location.href = `${tdkUrl.develop}/productsku/${item.skuCode}.html?page=1`
    // #endif
    },

  }
}
</script>

<style scoped lang="scss">
  .noShop {
    text-align: center;
    color: #999999;
    font-size: 28rpx;
    font-weight: 400;
    padding-top: 206rpx;
    box-sizing: border-box;
    image {
      width: 168rpx;
      height: 244rpx;
      display: block;
      margin: 0 auto;
      margin-bottom: 22rpx;
    }
  /* #ifdef H5 */
  img{
      width: 168rpx;
      height: 244rpx;
      display: block;
      margin: 0 auto;
      margin-bottom: 22rpx;
  }
    /*#endif*/
  }
.collect-content{
    box-sizing: border-box;
    padding-bottom: 0rpx;
  .content{
    padding: 16rpx 32rpx;
    box-sizing: border-box;
    padding-bottom: 0;
  .shop {
    padding: 16rpx;
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    border-radius:$uni-border-radius-default;
    border-top: 2rpx solid #F5F5F5;
    .promo {
      justify-content: flex-start;
      color: #FF5533;
      font-size: 24rpx;
      font-weight: 400;
      padding-top: 22rpx;
      padding-bottom: 8rpx;
      box-sizing: border-box;
      margin-left: 264rpx;
      image {
        width: 64rpx;
        height: 32rpx;
        margin-right: 8rpx;
      }
    }
  }
  .shopInfoTop {
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
  }
  .shopImg {
    justify-content: space-between;
    position: relative;
    image {
      width: 190rpx;
      height: 190rpx;
    }
    .invalidShop {
      width: 130rpx;
      height: 130rpx;
      background: rgba(0,0,0,0.6);
      position: absolute;
      z-index: 1;
      border-radius: 50%;
      color: #FFFFFF;
      font-size: 24rpx;
      font-weight: 400;
      text-align: center;
      line-height: 130rpx;
      right: 30rpx;
    }
  }
  .popupContent {
    padding: 16rpx 32rpx;
    box-sizing: border-box;
    padding-bottom: 68rpx;
  }
  .content {
    padding: 16rpx 32rpx;
    box-sizing: border-box;
    padding-bottom: 0rpx;
    .reduceTitle {
      color: #808080;
      font-size: 24rpx;
      font-weight: 400;
      background: #FFFFFF;
      padding: 14rpx 48rpx;
      box-sizing: border-box;
      justify-content: flex-start;
      image {
        width: 64rpx;
        height: 32rpx;
        margin-right: 8rpx;
      }
    }
  }
  .shopInfo {
    width: 400rpx;
    .shopName {
      font-size: 24rpx;
      font-weight: 400;
      line-height: 36rpx;
      color: #000000;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      line-clamp: 2;
      -webkit-line-clamp: 2;
    }
    .shopCode {
      color: #AAAAAA;
      font-size: 24rpx;
      font-weight: 400;
      margin-top: 12rpx;
      justify-content: flex-start;
      image {
        width: 56rpx;
        height: 32rpx;
        margin-right: 5rpx;
      }
    }
      .price_row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-end;
        margin-top: 12rpx;
        .shopPrice {
          display: flex;
          align-items: flex-end;
          align-content: flex-end;
          color: rgba(255,85,51,1);
          font-size: 24rpx;
          font-weight: 400;
          flex-shrink: 0;
          /* #ifdef MP-ALIPAY */
          position: relative;
          top: -10rpx;
          margin-top: 0rpx;
          /* #endif */
          span {
            color: rgba(255,85,51,1);
            font-size: 32rpx;
            font-weight: 700;
            position: relative;
            top: 4rpx;
            /* #ifdef MP-ALIPAY */
            top: 10rpx;
            /* #endif */
          }
        }
        .shop_cart {
          display: flex;
          img {
            display: block;
            width: 32rpx;
            height: 32rpx;
          }
          .frequently-purchased-info{
          color: #aaa;
      }
        }
      }
  }
}
}

  .product-img-wrap {
    position: relative;
    .danger-bg{
      position: absolute;
      background: #000;
      opacity: 0.8;
      width: 130rpx!important;
      height: 130rpx!important;
      border-radius: 130rpx;
      top:30rpx;
      left:30rpx;
    }
    .danger_icon {
      position: absolute;
      font-size:24rpx;
      color: #fff;
      width: 130rpx;
      height: 130rpx;
      top:30rpx;
      left:30rpx;
      text-align: center;
      line-height: 130rpx;
    }
  }

/deep/ .u-swipe-action-item__content {
  z-index: 0;
}
</style>
